<template>
	<div style="color: #e61111;">

		<div>
			<section>
				<div>
					<div id="imgbox">
						<div>
							<u-swiper :list="commodity.CommodityPicture.split(',')" height="700" border-radius="0"></u-swiper>
						</div>
					</div>

					<div class="n-price">
						<div class="n-price__left price-area">
							<span class="u-fz-15 u-font-bold">￥</span>
							<span class="u-fz-24 u-font-bold">{{commodity.UnitPrice}}</span>
							<span class="line-through">￥{{commodity.OriginalPrice}}</span>
						</div>
					</div>

					<div class="u-title u-fz-18 u-pb-10 commodity-name">
						<h4 class="tit f-els-2">{{commodity.CommodityName?commodity.CommodityName:''}}</h4>
						<u-tag v-for="(item, index) in commodity.KeyWord.split(',')" :key="index" :text="item"
							type="primary" mode="dark"></u-tag>
					</div>
				</div>
			</section>
			<section class="j-block bg-white">
				<div id="qualityreport">
				</div>
				<div class="n-goodsdetailbar">
					<p class="txt">图文详情</p>
					<img class="v-img"
						src="https://dev.openea.net/linkey/bpm/appfile/Review/8cdd326d-c127-4f53-8183-85fac74233de.jpg">
				</div>
				<div class="u-pb-40" style="margin: 10px;">
					<u-parse :html="this.escape2Html(commodity.CommodityDetail)"></u-parse>
				</div>
			</section>
		</div>

		<article class="m-buybar">
			<div class="btn-wrap">
				<div @click="contactCustomerService" class="collect u-pl-10" style="display: flex;flex-direction: column;justify-content: center;text-align: center;">
					<div style="margin: 0 auto;">
						<u-icon name="chat" color="#9d9d9d" size="40"></u-icon>
					</div>
					<span>客服</span>
				</div>
				<div class="cart u-pr-5">
					<ShareBtn :docUnid="shareData.docUnid" :url="shareData.url" :route="shareData.route"
						:style="shareData.style" :type="shareData.type" :btnText="shareData.btnText" :posterData="shareData.posterData"></ShareBtn>
				</div>
				<a href="#" class="buynow btn" @click="JoinSolitaire">跟团购买</a>
			</div>
		</article>
		
		<!-- 模态框 -->
		<u-modal v-model="CustomerService_Show" confirm-text="关闭" title="客服微信" confirm-color="#e55e97">
			<view class="slot-content">
			  <rich-text :nodes="this.escape2Html(CustomerService.topPrompt)"></rich-text>
			  <div class="u-center u-pt-5 u-pb-5">
					<u-image width="300rpx" height="300rpx" :src="CustomerService.csQrCode" @longpress="saveImg"></u-image>
			  </div>
			  <rich-text :nodes="this.escape2Html(CustomerService.bottomPrompt)"></rich-text>
			</view>
		</u-modal>
	</div>
</template>

<script>
	import shareMixins from '@/mixins/share';
	export default {
		mixins: [shareMixins],
		data() {
			return {
				commodity: {},
				shareData: {
					docUnid: '',
					url: '',
					route: '',
					style: 3,
					type: 2,
					btnText: '帮卖海报',
					posterData: {
						imageURL: '',// 商品主图URL地址
						productName: '',// 商品名称
						productPrice: '',// 商品价格
						invitemsg: '邀请您参与拼团活动',// 邀请内容。如邀请购买商品，可不传。默认邀请
						type: 'bmhb',
					},
				},
				CustomerService_Show: false,
				CustomerService: {},
			}
		},

		onLoad(options) {
			if (this.isNotNull(options.docUnid) && this.isNotNull(options.SceneID)  && this.isNotNull(options.SceneAssetsId)) {
				// 获取商品详情
				this.getCommodityDetails(options.docUnid, options.SceneID, options.SceneAssetsId);
			} else {
				this.showMSG('error', '数据有误')
				setTimeout(() => {
					this.goBack()
				}, 1500)
			}
		},

		methods: {
			/**
			 * 获取接龙详情
			 */
			async getCommodityDetails(docUnid, SceneID, SceneAssetsId) {
				const userInfo = uni.getStorageSync('userInfo');
				let result = await this.$u.api.unifyMiniRest({
					userId: userInfo.userId,
					nickName: userInfo.nickName,
					appid: 'GroupPurchase',
					wf_num: 'R_GroupPurchase_BL003',
					docUnid: docUnid,// 文档ID
					SceneAssetsId: SceneAssetsId,// 定制ID
					SceneID: SceneID,// 场景ID
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					this.commodity = result.data;// 商品信息

					// 客服信息
					if (this.isNotNull(result.CustomerService)) {
						this.CustomerService = result.CustomerService
					}
					
					// 分享组件数据初始化
					this.shareData.docUnid = this.commodity.CommodityNo
					this.shareData.url = '/pages_private_scene2/GroupPurchase/CommodityDetails?docUnid='+this.commodity.docUnid+'&SceneID='+ this.commodity.SceneID+'&SceneAssetsId='+this.commodity.SceneAssetsId
					this.shareData.route = this.getCurrentPageUrl(this)
					this.shareData.posterData.imageURL = this.commodity.CommodityPicture.split(",")[0];
					this.shareData.posterData.productName = this.commodity.CommodityName;
					this.shareData.posterData.productPrice = this.commodity.DistributionReward;// 佣金
				} 
			},

			/**
			 * 参与接龙-跳转到购买商品页面
			 */
			async JoinSolitaire(){
				let solitaire = JSON.stringify(this.commodity)
				uni.navigateTo({
					url:"/pages_private_scene2/GroupPurchase/JoinSolitaire?solitaire="+encodeURIComponent(solitaire)
				})
			},
			
			/**
			 * 分享回调函数
			 */
			async shareSuccessCallBack(){
				// 保存分享次数
				let result = await this.$u.api.unifyMiniRest({
					userId: this.UserInfo.userId,
					nickName: this.UserInfo.nickName,
					appid: 'GroupPurchase',
					wf_num: 'R_AppletInterface_BL001',
					docUnid: this.commodity.docUnid,// 文档ID
					SceneAssetsId: this.commodity.SceneAssetsId,// 定制ID
					SceneID: this.commodity.SceneID,// 场景ID
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				console.log(result);
			},
			
			/**
			 * 点击联系客服
			 */
			contactCustomerService() {
				if (this.isNotNull(this.CustomerService.csQrCode)) {
					this.CustomerService_Show = true
				} else {
					this.showMSG('none', '请联系平台管理员')
				}
			},

		}
	}
</script>

<style scoped>
	.n-price {
		height: 50px;
		width: 93%;
		margin: 0 auto;
		color: #000000;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
	}

	.n-price__left {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		line-height: 110rpx;
	}

	.n-price .curprice {
		font-size: 15px;
		color: #e31436;
	}

	.n-price .curprice .curnum {
		font-size: 44rpx;
		font-weight: bold;
	}

	.n-price .mrkprice {
		text-decoration: line-through;
		margin-left: 5rpx;
		font-size: 30rpx;
		color: #999;
	}

	.n-price .tag {
		display: inline-block;
		padding: 0 5px;
		height: 15px;
		line-height: 15px;
		text-align: center;
		margin-left: 10px;
		vertical-align: 2px;
		font-size: 11px;
		color: #fff;
		background: #ff8587;
		border-radius: 3px;
	}

	.n-prdinfo {
		margin: 0 10px 10px;
		border-top: 1px solid #f0f0f0;
	}

	.n-prdinfo .tit {
		line-height: 32rpx;
		/* padding-top: 10px; */
		margin-bottom: 12rpx;
		width: 100%;
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
	}

	.n-prdinfo .subtit {
		font-size: 13px;
		color: #333;
		line-height: 21px;
	}

	.n-prdinfo .subtit .spec {
		color: #e31436;
	}

	.n-prdinfo .presaletxt {
		color: #f00;
	}

	.u-graybar {
		background: #f1f1f1;
		height: 10px;
	}

	.n-activitybox {
		background-color: #FFFFFF;
		width: 90%;
		margin: 0 auto;
	}

	.n-activitybox .itm {
		position: relative;
		padding: 9px 0;
		/* border-bottom: 1px solid #f0f0f0; */
		zoom: 1;
	}

	.n-activitybox .itm:after {
		display: block;
		clear: both;
		visibility: hidden;
		height: 0;
		overflow: hidden;
		content: ".";
	}

	.n-activitybox .itm .name {
		float: left;
		height: 24px;
		line-height: 24px;
		font-size: 13px;
		color: #6f6e6e;
	}

	.n-activitybox .itm .cnt {
		margin-left: 50px;
		padding-top: 1px;
		padding-right: 10px;
	}

	.n-activitybox .itm:last-child {
		border-bottom: none;
	}

	.n-activitybox .v-linkicon {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0px;
		width: 10px;
		height: 10px;
		margin-top: auto;
		margin-bottom: auto;
		background-size: 200px;
	}


	.mrkprice {
		padding-left: 8rpx;
	}

	.v-sperate {
		height: 10px;
		background: #f1f1f1;
	}

	.n-goodsdetailbar {
		position: relative;
		height: 44px;
	}

	.n-goodsdetailbar .txt {
		position: absolute;
		top: 0;
		left: 0px;
		z-index: 9;
		width: 100%;
		height: 44px;
		line-height: 44px;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
	}

	.n-goodsdetailbar .v-img {
		display: block;
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 90rpx;
	}

	img {
		vertical-align: middle;
		border: 0;
	}

	.m-buybar {
		position: fixed;
		z-index: 999;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 50px;
		background: #fff;
	}

	.m-buybar .btn-wrap {
		height: 100%;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
	}

	.m-buybar a {
		display: block;
		height: 50px;
		vertical-align: top;
		font-size: 15px;
		line-height: 50px;
		text-align: center;
	}

	.m-buybar .btn {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
	}

	.m-buybar .buynow {
		color: #fff;
		/* background: #e31436; */
		background: #e55e97;
	}

	.m-buybar .buynow.btn-large {
		border: none;
		background-color: #d22147;
		color: #fff;
	}

	.m-buybar .buynow.dis {
		color: #fff;
		background-color: #ccc;
		border: none;
		cursor: default;
	}

	.m-buybar .buynow.s-fc {
		background: #000;
	}

	.m-buybar .addcart {
		background-color: #ff8587;
		color: #fff;
	}

	.m-buybar .addcart.dis {
		color: #fff;
		background-color: #ccc;
		border: none;
		cursor: default;
	}

	.m-buybar .collect {
		position: relative;
		/* width: 95px; */
		width: 140rpx;
		/* padding-top: 12px; */
		/* border-top: 1px solid #ddd; */
		/* border-right: 1px solid #ddd; */
		color: #666;
		font-size: 24rpx;
	}

	.m-buybar .collect:after {
		content: "";
		position: absolute;
		width: 20px;
		height: 20px;
		top: 7px;
		left: 17px;
		background-size: 200px;
	}

	.m-buybar .collect-1 {
		background-position: -161px 1px;
	}

	.m-buybar .collect-1:after {
		background-position: -139px -33px;
	}

	.m-buybar .cart {
		position: relative;
		width: 55px;
		/* padding-top: 12px; */
		/* border-top: 1px solid #ddd; */
		color: #666;
		font-size: 12px;
		background-size: 200px;
	}

	.m-buybar .cart .count {
		position: absolute;
		min-width: 16px;
		height: 16px;
		left: 27px;
		top: 2px;
		background-color: #fff;
		color: #e31436;
		-webkit-border-radius: 8px;
		border-radius: 8px;
		font-size: 12px;
		line-height: 14px;
		text-align: center;
		padding: 0 4px;
		border: 1px solid #e31436;
	}

	.m-buybar .nogoods {
		position: absolute;
		top: -40px;
		left: 0;
		width: 100%;
		padding-left: 10px;
		background-color: rgba(0, 0, 0, 0.7);
		text-align: left;
		font-size: 16px;
		line-height: 40px;
		color: #fff;
	}

	.m-buybar .nogoods:after {
		content: "";
		position: absolute;
		width: 70px;
		height: 45px;
		left: 10px;
		top: -35px;
		background-size: 200px;
	}

	.m-buybar .cantdeliver {
		position: absolute;
		text-align: center;
		top: -40px;
		left: 0;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		font-size: 12px;
		line-height: 40px;
		color: #fff;
	}

	.m-buybar .hide {
		display: none;
	}

	.bg-white {
		background-color: #FFFFFF;
	}

	.itm-value {
		font-weight: 500;
	}

	.f-els-1 {
		line-height: 48rpx;
	}

	.recovery {
		color: #fff;
		background: #eab315;
	}

	.view-pro {
		color: #fff;
		background: #3b79fe;
	}

	.slot-content {
		font-size: 28rpx;
		color: #bcbcbc;
		text-align: center;
		margin: 0 auto;
	}

	.infoblocks {
		background-color: #FFFFFF;
	}

	.remark-box {
		/* width: 95%; */
		margin: 0 auto;
	}

	.remark-rule {
		margin: 0rpx 40rpx 0rpx 40rpx;
	}
	
	.remark-rule-title {
		color: #6f6e6e;
		height: 24px;
		line-height: 24px;
		font-size: 13px;
	}
	
	.line-through {
		font-size: 32rpx;
		color: #919191;
		padding: 0 0.2rem;
		text-decoration: line-through;
	}
	
	.price-area{
		color: red;
	}
	
	.commodity-name {
		width: 93%;
		margin: 0 auto;
		color: #000000;
	}
	
	.work-free {
		width: 93%;
		margin: 0 auto;
		background-color: #fef9e6;
		color: #000000;
		padding: 20rpx;
	}
	
	.work-free .text1 {
		color: #3e3d3d;
	}
	
	.work-free .text2 {
		color: #7d7d7d;
	}
	
	.work-free .text2 span {
		color: red;
	}
	
	.notice-area {
		color: #7d7d7d;
		width: 93%;
		margin: 0 auto;
	}
	
	.aui-flex-goods {
		margin-right: .8em;
		width: 80px;
		height: 80px;
		line-height: 80px;
		text-align: center;
		float: left;
		display: inline;
	}
	
	.aui-flex-goods img {
		width: 100%;
		max-height: 100%;
		vertical-align: top;
	}
	
	.aui-flex-content {
		display: inline;
		width: 80px;
		height: 80px;
	}
	
	.aui-flex-title{
		font-weight: bold;
		color: #1d1b1b;
		font-size: 30rpx;
		padding-bottom: 10rpx;
	}
	
	.aui-flex-time{
		font-size: 24rpx;
		color: #bcbcbc;
		padding-top: 15rpx;
	}
	
</style>
